<script>
export default {
  name: "PersonInfo",
  data() {
    return {
      userData: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      Authorities: localStorage.getItem("authorities") ? JSON.parse(localStorage.getItem("authorities")) : {},
      userForm: {},
      elCardVisible: false
    }
  },
  created() {
    console.log(this.userData)
    this.request.get("http://localhost:9090/user/userID/" + this.userData.id).then (res => {
      console.log(res)
      if (res.code === '200') {
        this.userForm = res.data;
      }
    })
  },
  methods: {
    updateAll() {
      this.request.post("http://localhost:9090/user/updateAll", this.userForm).then(res => {
        if (res) {
          this.$message.success("保存成功");
          this.userData = this.userForm;
        } else {
          this.$message.error("保存失败");
        }
      })
    },
    showCard() {
      this.elCardVisible ^= 1;
    }
  }
}
</script>

<template>
  <div>
    <el-descriptions title="用户信息">
      <el-descriptions-item label="id">{{ userData.id }}</el-descriptions-item>
      <el-descriptions-item label="用户名">{{ userData.username }}</el-descriptions-item>
      <el-descriptions-item label="密码">{{ userData.password }}</el-descriptions-item>
      <el-descriptions-item label="昵称">{{ userData.nickname }}</el-descriptions-item>
      <el-descriptions-item label="邮箱">{{ userData.email }}</el-descriptions-item>
      <el-descriptions-item label="手机号">{{ userData.phone }}</el-descriptions-item>
      <el-descriptions-item label="地址">{{ userData.address }}</el-descriptions-item>
      <el-descriptions-item label="角色编码">{{ userData.roleCode }}</el-descriptions-item>
      <el-descriptions-item label="权限编码">{{ userData.authorityCode }}</el-descriptions-item>
    </el-descriptions>
    <div style="margin-top: 10px" v-show="this.Authorities.Authority32">
      <el-button type="success" @click="showCard">编辑<i class="el-icon-edit"></i></el-button>
    </div>
    <el-card style="width: 500px; margin-top: 10px" v-show="elCardVisible">
      <el-form label-width="100px">
        <el-form-item label="用户名">
          <el-input v-model="userForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="userForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="userForm.nickname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="userForm.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="userForm.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="userForm.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateAll">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<style scoped>

</style>